<template>
  <div class="container">
    <aside>
      <h3>控制台</h3>

      <el-menu
        default-active="/home/access_control"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="rgb(2, 19, 51)"
        text-color="white"
        :unique-opened="true"
        :router="true"
      >
        <el-sub-menu v-for="item in roles" :index="item.index">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="value in item.children" :index="value.index">
            <el-icon><document /></el-icon>
            <template #title>{{ value.title }}</template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

      <footer style="width: 220px">
        <div class="footer-item">
          <el-icon><document /></el-icon>
          <span>{{ time }}</span>
        </div>
        <div class="footer-item">
          <el-icon><document /></el-icon>
          <span>{{ username }}</span>
        </div>
        <div class="arrow" @click="arrowClick">
          <el-icon><ArrowLeftBold /></el-icon>
        </div>
      </footer>
    </aside>
    <main>
      <RouterView />
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { RouterView } from 'vue-router'
const isCollapse = ref(false)
const arrowClick = () => {
  // isCollapse.value = !isCollapse.value
}

const time = ref('')
const getTime = () => {
  const now = new Date()

  const hours = now.getHours()
  const minutes = now.getMinutes()

  console.log(`当前时间是：${hours}点${minutes}分`)

  const formattedHours = hours < 10 ? '0' + hours : hours
  const formattedMinutes = minutes < 10 ? '0' + minutes : minutes

  return `${formattedHours}:${formattedMinutes}`
}

const roles = ref([])
const username = ref('')
onMounted(() => {
  const roles2 = localStorage.getItem('roles')
  username.value = localStorage.getItem('username')

  if (roles2 === 'admin') {
    roles.value = [
      {
        index: '1',
        title: '门禁',
        children: [
          {
            index: '/home/access_control',
            title: '门禁管理',
          },
          {
            index: '/home/device_management',
            title: '设备管理',
          },
        ],
      },
      {
        index: '2',
        title: '监控管理',
        children: [
          {
            index: '/home/monitoring1',
            title: '监控管理1',
          },
          {
            index: '/home/monitoring2',
            title: '监控管理2',
          },
        ],
      },
      {
        index: '3',
        title: '权限管理',
        children: [
          {
            index: '/home/permission1',
            title: '权限管理1',
          },
          {
            index: '/home/permission2',
            title: '权限管理2',
          },
        ],
      },
      {
        index: '4',
        title: '系统管理',
        children: [
          {
            index: '/home/system1',
            title: '系统管理1',
          },
          {
            index: '/home/system2',
            title: '系统管理2',
          },
        ],
      },
    ]
  } else if (roles2 === 'user') {
    roles.value = [
      {
        index: '1',
        title: '门禁',
        children: [
          {
            index: '/home/access_control',
            title: '门禁管理',
          },
          {
            index: '/home/device_management',
            title: '设备管理',
          },
        ],
      },
      {
        index: '2',
        title: '监控管理',
        children: [
          {
            index: '/home/monitoring1',
            title: '监控管理1',
          },
          {
            index: '/home/monitoring2',
            title: '监控管理2',
          },
        ],
      },
    ]
  }
  time.value = getTime()
})
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: rgb(2, 19, 51);
  display: flex;
}

aside {
  width: 250px;
  height: 100%;
  border-right: 2px solid #fff;
  position: relative;
}

h3 {
  color: #fff;
  padding: 20px;
}
.is-active {
  background-color: rgba(255, 255, 255, 0.2);
}

footer {
  margin: 0 15px;
  height: 70px;
  border-top: 1px solid #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
}
.footer-item {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  font-size: 14px;
}
.arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(2, 19, 51);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

main {
  flex: 1;
}
</style>
